<template>
  <svg
    :class="[
      'layout-mode-icon',
      `layout-mode-icon--${type}`,
      { 'layout-mode-icon--active': active },
    ]"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- 侧边栏模式 -->
    <template v-if="type === 'side'">
      <rect x="10" y="10" width="20" height="80" class="menu" />
      <rect x="35" y="10" width="55" height="20" class="header" />
      <rect x="35" y="35" width="55" height="55" class="content" />
    </template>

    <!-- 顶部模式 -->
    <template v-if="type === 'top'">
      <rect x="10" y="10" width="80" height="20" class="menu" />
      <rect x="10" y="35" width="80" height="55" class="content" />
    </template>

    <!-- 混合模式 -->
    <template v-if="type === 'mix'">
      <rect x="10" y="10" width="80" height="20" class="header" />
      <rect x="10" y="35" width="20" height="55" class="menu" />
      <rect x="35" y="35" width="55" height="55" class="content" />
    </template>
  </svg>
</template>

<script setup lang="ts">
defineProps<{
  type: "side" | "top" | "mix";
  active?: boolean;
}>();
</script>

<style scoped>
.layout-mode-icon {
  width: 3em;
  height: 3em;
  transition: all 0.3s;
  border: 1px solid var(--n-border-color);
  border-radius: 4px;
  padding: 4px;
}

.layout-mode-icon rect {
  fill: var(--n-text-color-disabled);
  transition: all 0.3s;
  stroke: var(--n-text-color-disabled);
  stroke-width: 0.5;
}

.layout-mode-icon--active {
  border-color: var(--primary-color);
}

.layout-mode-icon--active rect {
  fill: var(--primary-color);
  stroke: var(--primary-color);
}

.layout-mode-icon:hover rect {
  fill: var(--primary-color);
  opacity: 0.8;
}

.layout-mode-icon .menu {
  opacity: 0.9;
}

.layout-mode-icon .header {
  opacity: 0.7;
}

.layout-mode-icon .content {
  opacity: 0.5;
}
</style>
